<template>
	<view class="cart-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="title">购物车</text>
			<text class="edit-btn">编辑</text>
		</view>

		<!-- 购物车商品列表 -->
		<view class="cart-list">
			<!-- 商品项 -->
			<view class="cart-item" v-for="item in cartItems" :key="item.proid">
				<view class="item-checkbox">
					<checkbox :checked="item.flag" @click="comChange(item)"/>
				</view>
				<view class="item-image">
					<image :src="item.img1" mode="aspectFill" />
				</view>
				<view class="item-info">
					<text class="item-name">{{ item.proname }}</text>
					<text class="item-spec">{{ item.spec }}</text>
					<view class="item-bottom">
						<text class="item-price">¥{{ item.originprice }}</text>
						
						<view class="quantity-control">
							<text class="quantity-btn" @click="decreaseQuantity(item.proid)">-</text>
							<text class="quantity">{{ item.num }}</text>
							<text class="quantity-btn" @click="increaseQuantity(item.proid)">+</text>
						</view>
						<button class="item-button-01" @click="deleteFn(item.cartid)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 购物车操作区域 -->
		<view class="cart-actions">
			<view class="action-row">
				<view class="select-all-section">
					<checkbox :checked="allSelected"  @click="comChangeAll"/>
					<text class="select-all-text">全选</text>
				</view>
				<view class="total-section">
					<text class="total-label">总计：</text>
					<text class="total-amount">¥{{ totalPrice }}</text>
				</view>
			</view>
			<view class="purchase-section">
				<button class="purchase-btn" type="primary">立即购买</button>
				<button class="add-to-cart-btn" type="default">加入购物车</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		useCounterStore
	} from '@/stores/counter'

	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const counter = useCounterStore()
	// 购物车商品数据
	const cartItems = ref([])
	


	// 计算属性
	const allSelected = computed(() => {
		return cartItems.value.every(item => item.flag)
	})

	const selectedCount = computed(() => {
		return cartItems.value.filter(item => item.flag).length
	})

	const totalPrice = computed(() => {
		return cartItems.value
			.filter(item => item.flag)
			.reduce((total, item) => total + item.originprice * item.num, 0)
	})

	const token = ref('')

	onLoad(() => {
		console.log("cart")
		token.value = uni.getStorageSync("token")
		getCartListFn()
	})

	function getCartListFn() {
		uni.request({
			url: "http://47.94.6.186:3001/api/cart/list",
			method: "post",
			header: {
				"token": token.value
			},
			data: {
				userid: counter.userid
			},
			success(r) {
				console.log(r.data)
				cartItems.value = r.data.data
				console.log(cartItems.value)
			}
		})
	}

	// 切换单个商品选中状态
	
	function comChange(item){
		console.log(item)
		uni.request({
			url:"http://47.94.6.186:3001/api/cart/selectone",
			method:"post",
			header:{
				"token":token.value
			},
			data:{
				cartid:item.cartid,
				flag:!item.flag
			},
			success(r){
				console.log(r.data)
				getCartListFn()
			}
		})
	}

	// 切换全选状态
	const comChangeAll = () => {
		console.log(allSelected.value)
		uni.request({
			url:"http://47.94.6.186:3001/api/cart/selectall",
			method:"post",
			header:{
				"token":token.value
			},
			data:{
				userid:counter.userid,
				type:!allSelected.value
			},
			success(r){
				console.log(r.data)
				getCartListFn()
			}
		})
	}

	// 增加商品数量
	const increaseQuantity = (itemId) => {
		const item = cartItems.value.find(item => item.proid === itemId)
		if (item) {
			item.num++
			console.log(item.num)
			console.log(item.cartid)
			uni.request({
				url: 'http://47.94.6.186:3001/api/cart/updatenum',
				method: 'post',
				header: {
					"token": token.value
				},
				data: {
					cartid: item.cartid,
					num: item.num
				},
				success(r){
					console.log(r.data)
				}
			})
		}
	}
	
	// 减少商品数量
	const decreaseQuantity = (itemId) => {
	
		const item = cartItems.value.find(item => item.proid === itemId)
		if (item && item.num > 1) {
			item.num--
			console.log(item.num)
			console.log(item.cartid)
			uni.request({
				url: 'http://47.94.6.186:3001/api/cart/updatenum',
				method: 'post',
				header: {
					"token": token.value
				},	
				data: {
					cartid: item.cartid,
					num: item.num		
				},
				success(r){
					console.log(r.data)
				}	
			})
		}
	}
	
	function deleteFn(id){
		console.log('cartid:'+id)
		uni.request({
			url:"http://47.94.6.186:3001/api/cart/remove",
			method:"post",
			header:{
				"token":token.value
			},
			data:{
				cartid:id
			},
			success(r){
				console.log(r.data)
				getCartListFn()
			}
		})
	}
</script>

<style scoped>
	.cart-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 30rpx;
	}

	/* 顶部导航栏 */
	.header {
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.edit-btn {
		font-size: 28rpx;
		color: #007aff;
	}

	/* 购物车列表 */
	.cart-list {
		margin-top: 20rpx;
	}

	.cart-item {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.item-checkbox {
		margin-right: 20rpx;
	}

	.item-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.item-image image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 160rpx;
	}

	.item-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 5rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.25;
	}

	.item-spec {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.item-button-01 {
		height:60rpx;
		width:80rpx;
		font-size: 25rpx;
		line-height: 60rpx;
		padding: 0rpx;
		background-color: #ff4757;
		color: #f8f8f8;
		float: left;
		flex:1;
	}

	.item-price {
		flex:2;
		font-size: 32rpx;
		color: #ff4757;
		font-weight: bold;
	}

	.quantity-control {
		
		display: flex;
		align-items: center;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #666;
		background-color: #f8f8f8;
	}

	.quantity {
		width: 80rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		border-left: 1rpx solid #ddd;
		border-right: 1rpx solid #ddd;
	}

	/* 购物车操作区域 */
	.cart-actions {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.action-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.select-all-section {
		display: flex;
		align-items: center;
	}

	.select-all-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 10rpx;
	}

	.total-section {
		display: flex;
		align-items: center;
	}

	.total-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.total-amount {
		font-size: 36rpx;
		color: #ff4757;
		font-weight: bold;
	}

	.purchase-section {
		display: flex;
		gap: 15rpx;
	}

	.purchase-btn {
		flex: 1;
		background-color: #ff4757;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.add-to-cart-btn {
		flex: 1;
		background-color: #fff;
		color: #ff4757;
		border: 2rpx solid #ff4757;
		border-radius: 8rpx;
		padding: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		height: 100rpx;
	}

	/* 底部结算栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.select-all {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}

	.select-all text {
		font-size: 28rpx;
		color: #333;
		margin-left: 10rpx;
	}

	.total-info {
		flex: 1;
		text-align: right;
		margin-right: 30rpx;
	}

	.total-text {
		font-size: 28rpx;
		color: #333;
	}

	.total-price {
		font-size: 36rpx;
		color: #ff4757;
		font-weight: bold;
	}

	.checkout-btn {
		background-color: #ff4757;
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>